<template>
  <div class="home">
    <Jinpin></Jinpin>
    <div class="wrap jpitemwrap">
      <Item v-for="item in list" :key="item.id" :data="item"></Item>
    </div>
    <Hot></Hot>
    <Banner1></Banner1>
    <div class="wrap item">
      <ul class="item-list" :style="{ display: 'flex' }">
        <HotItem v-for="item in list1" :key="item.id" :data1="item"></HotItem>
      </ul>
    </div>
    <Jituigonglue></Jituigonglue>
    <ZhuangList></ZhuangList>
  </div>
</template>

<script>
// 精品推荐
import Jinpin from "@/views/Jinpin.vue";

// 热门推荐
import Hot from "@/views/Hot.vue";

// 精品推荐列表
import Item from "@/views/Item.vue";

// 热门推荐列表
import HotItem from "@/views/HotItem.vue";

// 精品请求的数据api
import { JingpinAPI, HotAPI } from "@/request/api";

// 热门兑换图片
import Banner1 from "@/views/Banner1.vue";

// 赚钱攻略
import Jituigonglue from "@/views/Jituigonglue.vue";

// 鸡腿列表
import ZhuangList from "@/views/ZhuangList.vue";

export default {
  data() {
    return {
      list: [],
      list1: [],
    };
  },

  components: {
    Jinpin,
    Item,
    Hot,
    Banner1,
    HotItem,
    Jituigonglue,
    ZhuangList
  },
  // 数据请求
  async created() {
    // JingpinAPI().then((res) => {
    //   console.log(res);
    // });
    // 精品推荐api
    let res = await JingpinAPI();
    console.log(res);
    this.list = res.data.data.data.records;

    // 热门推荐api
    let res1 = await HotAPI();
    console.log(res1);
    this.list1 = res1.data.data.data.records;
  },
};
</script>

<style lang='less' scoped>
.jpitemwrap {
  display: flex;
  justify-content: space-between;
}
.item-list {
  flex-wrap: wrap;
}
.home {
  background-color: #f5f5f5;
}
</style>
